<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
/*		属性选择器*/
	
		/*a[href="baidu"]{
			color: black;
			text-decoration: none;
		}*/
/*		以 t 开头的属性值*/
		/*a[href^="t"]{
			color: black;
			text-decoration: none;
		}*/
/*		以 g 结尾的属性值*/
		/*a[href$="g"]{
			color: black;
			text-decoration: none;
		}*/
/*		包含 ai 的属性值*/
		a[href*="ai"]{
			color: black;
			text-decoration: none;
		}
		div[class^="list"]{
			background-color: red;
		}
/*		选中自定义属性*/
		div[data-id]{
			background-color: blue;
		}
/*		伪元素选择器*/
/*		选中文章的第一行*/
		p::first-line{
			color: #0099ff;
		}
/*		选中第一个字*/
		p::first-letter{
			font-size: 30px;
			font-weight: bold;
		}
/*		复制文字时的选中效果*/
		p::selection{
			background-color: orange;
		}

		body{
			height: 5000px;
		}
/*		设置整个滚动条的尺寸 如果为0 则不显示*/
		::-webkit-scrollbar{
			width: 100px;
		}
/*		设置课拖动滑块样式*/
		::-webkit-scrollbar-thumb{
			border-radius: 50px;
			background-color: #000;
		}
/*		设置滚动条两端的按钮*/
		::-webkit-scrollbar-button{
			background-color: blue;
			height: 100px;
			border-radius: 50%;
/*			如果考虑兼容老版本*/
			-webkit-transition:all 1s;
			-moz-transition:all 1s;
			-o-transition:all 1s;
			transition:all 1s;
		}

/*		因为早些时候 不同浏览器对于css的属性适配程度不同,为了确保兼容性 可以添加浏览器前缀 来确保css的执行*/
/*		-webtit-  Chrome Safari  适配浏览器写法*/
/*		-moz-  Firefox*/
/*		-o- Opera*/
	</style>

</head>
<body>

	<a href="baidu">百度</a>
	<a href="taobao">淘宝</a>
	<a href="jingdong">京东</a>

	<div class="list-item">1111</div>
	<div class="header-only" data-id>2222</div>
	<div class="list-only">3333</div>



	<p>
		彩云之南，雪山之麓，始建于宋末元初的丽江古城宛如一颗明珠镶嵌在云岭大地上，在历史的长河中璀璨溢彩。
	</p>
	<p>
		“习近平总书记不时同商家店主和游客亲切交流，详细询问相关情况。总书记对文化遗产保护利用、文旅融合发展深切关注，有着深刻思考，提出了明确要求。”当地负责同志说，我们牢记总书记嘱托，把文化遗产系统性保护、改善人居和旅游环境、丰富历史文化名城内涵等紧密结合，正加快推进丽江古城保护管理规划修编，努力提升古城品牌价值。
	</p>





	<!-- CSS3 -->
	<!-- border-radius -->

	<!-- HTML5 -->

</body>
</html>